<template>
  <div>
    <h1>App - {{ msg }}</h1>
    <button @click="increment">{{ count }}</button>

    <!-- <ul>
      <li v-for="item in list" :key="item.id" v-if="item.isDone">
        {{ item.name }}
      </li>
    </ul> -->

    <template v-for="item in list" :key="item.id">
       <div>{{ item.name }}</div>
    </template>

    <hr />
    <button @click="show = !show">Toggle</button>
    <HelloWorld v-if="show" />
  </div>
</template>

<script>
import { nextTick } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld,
  },

  data() {
    return {
      show: true,
      name: '张三',
      obj: {},
      count: 1,
      list: [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false },
      ],
    }
  },

  watch: {
    count: {
      handler() {
        console.log('count 改变了')
        // 获取 button 按钮的真实DOM数据
        console.log(document.querySelector('button').innerHTML)
      },
      flush: 'post'
    }
  },

  methods: {
    increment() {
      this.count++

      // 1. 可以使用 this.$nextTick
      // this.$nextTick(() => {
      //   // 直接获取真实DOM
      //   console.log(document.querySelector('button').innerHTML)
      // })

      // 2. 可以从 vue 引入 nextTick api
      //    在整个Vue3体系中,更推荐我们使用组合式API的语法,而组合式语法中是没有this这个东西的.
      nextTick(() => {
        // 直接获取真实DOM
        console.log(document.querySelector('button').innerHTML)
      })
    },
  },

  created() {
    // console.log('App', this)
    // const newObj = {}
    // this.obj = newObj
    // console.log('this.obj === newObj', this.obj === newObj)
    // console.log('===this.obj', this.obj)
    // console.log('===newObj', newObj)
    // const obj = {
    //   name: '张三',
    //   age: 18
    // }
    // const objProxy = new Proxy(obj, {
    //   // eslint-disable-next-line no-unused-vars
    //   get(target, key, receiver) {
    //     // target 是代理的目标对象 obj
    //     // key 正在读取的属性
    //     // receiver 是生成的代理对象
    //     console.log('get')
    //     return target[key]
    //   },
    //   // eslint-disable-next-line no-unused-vars
    //   set(target, key, value, receiver) {
    //     // target 是代理的目标对象 obj
    //     // key 正在操作的属性
    //     // value 要操作的值
    //     // receiver 是生成的代理对象
    //     console.log('set')
    //     target[key] = value
    //     return true
    //   }
    // })
    // console.log(objProxy.name) // '张三'
    // objProxy.name = '李四'
    // console.log(objProxy.name) // '张三'
  },
}
</script>
